<template>
  <div class="livePlaybackBox">
    <x-header :left-options="{showBack: true,backText:'麦月小苍尔作文'}" class="headerBox"></x-header>
 <!-- 直播 -->
    <div class="navLive">
      <img src="../assets/images/Courseinfo01.png" />
      <div class="navLive_stop">
        <div>第二章：1.如何做出更好的作文题目？</div>
        <div class="navLive_stop_btn">
          <img src="../assets/images/icon03.png" />
          <div>回放</div>
        </div>
        <div class="liveTime">2019-2-26 10:00-12:00</div>
      </div>
    </div>
    <!-- 下载弹框 -->
    <confirm v-model="showDownload" title="确认下载改文件吗" @on-confirm="downloadConfirm">
      <img :src="downloadImg" alt class="downLoadIcon" />
      <div>{{downloadTitle}}</div>
    </confirm>
    <!-- tab导航 -->
    <div class="navTabList">
      <tab
        :line-width="3"
        custom-bar-width="20px"
        active-color="#000"
        bar-active-color="#1F7AFF"
        v-model="tabIndex"
      >
        <tab-item
          class="vux-center"
          v-for="(item, index) in listContent"
          :key="index"
        >{{item.title}}</tab-item>
      </tab>
    </div>
    <!-- 内容 -->
    <swiper
      v-model="tabIndex"
      :show-dots="false"
      ref="cateSwiper"
      :min-moving-distance="2000"
      @on-get-height="getPageHeight"
      class="swiperBox"
    >
      <swiper-item v-for="(item, index) in listContent" :key="index">
        <!-- 目录 -->
        <div v-if="item.title == '目录'" class="catalogBox">

          <group v-for="(chapter,index2) in item.dataContent" :key="index2">
            <cell
              :title="chapter.zhang"
              is-link
              :border-intent="true"
              :arrow-direction="chapter.showContent ? 'up' : 'down'"
              @click.native="chapter.showContent = !chapter.showContent"
            ></cell>
            <p class="slide" :class="chapter.showContent?'animate':''">
              <router-link to="/" class="jie" v-for="(jie, index3) in chapter.jies" :key="index3">
                <img :src="jie.src" class="jieIcon" />
                <div class="jieInfo">
                  <div>
                    <p>{{jie.jieName}}</p>
                    <p class="jyDate">建议完成时间：{{jie.date}}</p>
                  </div>
                  <img v-if="jie.state" src="../assets/images/accomplish.png" class="jieState" />
                </div>
              </router-link>
              <router-link to="/" class="jie">
                <img src="../assets/images/operation02.png" class="zyIcon" />
                <div class="jieInfo">
                  <div>
                    <p class="zyTitle">老师布置的作业</p>
                    <p class="zyNum">
                      共
                      <span>{{chapter.zynum}}</span>份作业
                    </p>
                  </div>
                  <img src="../assets/images/entrance.png" class="jieState" />
                </div>
              </router-link>
            </p>
          </group>
        </div>
        <!-- 话题 -->
        <div v-if="item.title == '话题'">
          <img
            v-if="item.dataContent.length<=0"
            src="../assets/images/nullmaterial02.png"
            alt
            class="emptyBox"
          />
        </div>
        <!-- 笔记 -->
        <div v-if="item.title == '笔记'">
          <img
            v-if="item.dataContent.length<=0"
            src="../assets/images/nullmaterial01.png"
            alt
            class="emptyBox"
          />
        </div>
        <!-- 资料区 -->
        <div v-if="item.title == '资料区'" class="dataBox">
          <img
            v-if="item.dataContent.length<=0"
            src="../assets/images/nullmaterial07.png"
            alt
            class="emptyBox"
          />
          <!-- 资料区tab -->
          <ul class="vux-tab">
            <li
              class="vux-tab-item"
              v-for="(val,num) in item.dataContent"
              :key="num"
              @click="onDataTab(num)"
            >
              <span :class="tabIndex2 == num?'active': ''">{{val.title}}</span>
            </li>
          </ul>
          <div v-for="(data, indexd) in item.dataContent" :key="indexd">
            <!-- 我的资料 -->
            <div v-if="tabIndex2==indexd">
              <!-- 筛选 -->
              <div class="resTitleBox">
                <div class="resTitle_left">全部文档 (20)</div>
                <div class="resTitle_right">
                  <img src="../assets/images/search30.png" />
                  <img src="../assets/images/filtrate6.png" @click="sortPop = !sortPop" />
                  <img src="../assets/images/filtrate7.png" @click="upLoadPop = !upLoadPop" />
                </div>

                <!-- 筛选弹框 -->
                <div class="sorts" v-if="sortPop == true">
                  <div class="sortList">
                    <img src="../assets/images/icon_weijian2x.png" />文件
                  </div>
                  <div class="sortList">
                    <img src="../assets/images/icon_img2x.png" />照片
                  </div>
                  <div class="sortList">
                    <img src="../assets/images/icon_viedio2x.png" />视频
                  </div>
                </div>

                <!-- 上传弹框 -->
                <div class="sorts" style="right: 17px;" v-if="upLoadPop == true">
                  <div class="sortList">
                    <img src="../assets/images/icon_scwj2x.png" />上传文件
                  </div>
                  <div class="sortList">
                    <img src="../assets/images/icon_sctp2x.png" />上传照片
                  </div>
                  <div class="sortList">
                    <img src="../assets/images/icon_scsp2x.png" />上传视频
                  </div>
                </div>
              </div>
              <swipeout>
                <swipeout-item
                  transition-mode="follow"
                  v-for="(dataL, indexL) in data.dataList"
                  :key="indexL"
                >
                  <div slot="right-menu">
                    <swipeout-button class="delBtn">删除</swipeout-button>
                  </div>
                  <div slot="content" class="demo-content">
                    <div class="resList">
                      <img class="resList_left" :src="dataL.listSrc" />
                      <div class="resList_middle">
                        <div>{{dataL.listTitle}}</div>
                        <div>
                          <span>03/01</span>
                          <span>13:23</span>
                        </div>
                      </div>
                      <div class="resList_right">
                        <img src="../assets/images/material11.png" />
                        <img
                          v-if="tabIndex2!==0"
                          src="../assets/images/material07.png"
                          @click="clickDownload(dataL)"
                        />
                        <template v-if="tabIndex2!==0">
                          <img
                            v-if="dataL.collect == false"
                            src="../assets/images/material05.png"
                            @click="onCollect(indexd,indexL)"
                          />
                          <img
                            v-if="dataL.collect == true"
                            src="../assets/images/material08.png"
                            @click="onCollect(indexd,indexL)"
                          />
                        </template>
                      </div>
                    </div>
                  </div>
                </swipeout-item>
              </swipeout>
            </div>
          </div>
        </div>
        <!-- 评价 -->
        <div v-if="item.title == '评价'" class="commentBox">
          <img
            v-if="item.dataContent.length<=0"
            src="../assets/images/nullmaterial03.png"
            alt
            class="emptyBox"
          />
          <div class="evaBox">
            <div class="evaList" v-for="(eva, indexe) in item.dataContent" :key="indexe">
              <div class="evaList_left">
                <img :src="eva.src" />
              </div>
              <div class="evaList_right">
                <div class="evaList_right_top">
                  <div>{{eva.name}}</div>
                  <div class="stars">
                    <img v-for="(star, index5) in eva.stars" :key="index5" :src="star.src" alt />
                  </div>
                </div>
                <div class="evaList_right_middle">{{eva.txt}}</div>
                <div class="evaList_right_link">
                  <div class="evaList_right_link_name">{{eva.otherName}}</div>
                  <div>等人</div>
                  <div class="evaList_right_link_num">共{{eva.num}}条回复></div>
                </div>
                <div class="evaList_right_bottom">
                  <div class="evaList_right_bottom_left">12-25 18:17</div>
                  <div class="evaList_right_bottom_right">
                    <img src="../assets/images/share10.png" />
                    <img src="../assets/images/Reply12x.png" />
                    <img src="../assets/images/live11.png" />
                    <div>{{eva.zanNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>

    <!-- 上次学习到 -->
    <!-- <div v-for="(item, index) in listContent" :key="index">
      <div v-if="item.title == '目录'&&tabIndex==0" class="continues">
        <img src="../assets/images/aircraft.png" alt />
        <div>上次学习到：{{item.bookmark}}</div>
        <router-link to="/" class="continue_btn">继续学</router-link>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  XHeader,
  XProgress,
  Box,
  Group,
  Cell,
  Marquee,
  MarqueeItem,
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Confirm
} from "vux";
export default {
  components: {
    XHeader,
    XProgress,
    Box,
    Group,
    Cell,
    Marquee,
    MarqueeItem,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Confirm
  },
  data() {
    return {
      denominator: "20",
      numerator: "15",
      percent: 75,
      students: [
        {
          src: require("../assets/images/head02.png")
        },
        {
          src: require("../assets/images/head02.png")
        },
        {
          src: require("../assets/images/head02.png")
        }
      ],
      tabIndex: 3,
      tabIndex2: 0,
      // 小弹框
      sortPop: false,
      upLoadPop: false,
      // 下载文件
      showDownload: false,
      downloadImg: "",
      downloadTitle: "",
      // tab
      listContent: [
        {
          title: "目录",
          continue: true,
          bookmark: "作文第一章",
          dataContent: [
            {
              showContent: false,
              zhang: "作文第一章",
              jies: [
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "1.如何写出更好的文章",
                  date: "2018-12-01",
                  state: true
                },
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "2.如何写出更好的文章",
                  date: "2018-12-01",
                  state: true
                },
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "3.如何写出更好的文章",
                  date: "2018-12-01",
                  state: true
                },
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "4.如何写出更好的文章",
                  date: "2018-12-01"
                }
              ],
              zynum: "3"
            },
            {
              showContent: false,
              zhang: "作文第二章",
              jies: [
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "1.如何写出更好的文章",
                  date: "2018-12-01"
                },
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "2.如何写出更好的文章",
                  date: "2018-12-01"
                },
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "3.如何写出更好的文章",
                  date: "2018-12-01"
                }
              ],
              zynum: "2"
            },
            {
              showContent: false,
              zhang: "作文第三章",
              jies: [
                {
                  src: require("../assets/images/playback01.png"),
                  jieName: "1.如何写出更好的文章",
                  date: "2018-12-01"
                }
              ],
              zynum: "1"
            }
          ]
        },
        {
          title: "话题",
          dataContent: []
        },
        {
          title: "笔记",
          dataContent: []
        },
        {
          title: "资料区",
          dataContent: [
            {
              title: "我的资料",
              dataList: [
                {
                  listSrc: require("../assets/images/material03.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                },
                {
                  listSrc: require("../assets/images/material01.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                }
              ]
            },
            {
              title: "公共资料",
              dataList: [
                {
                  listSrc: require("../assets/images/material02.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                },
                {
                  listSrc: require("../assets/images/material04.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                }
              ]
            },
            {
              title: "收藏夹",
              dataList: [
                {
                  listSrc: require("../assets/images/material06.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: true
                },
                {
                  listSrc: require("../assets/images/material10.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: true
                }
              ]
            },
            {
              title: "来自分享",
              dataList: [
                {
                  listSrc: require("../assets/images/material01.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                },
                {
                  listSrc: require("../assets/images/material04.png"),
                  listTitle: "如何写出更好的作文题目",
                  collect: false
                }
              ]
            }
          ]
        },
        {
          title: "评价",
          dataContent: [
            {
              src: require("../assets/images/playback05.png"),
              name: "高慧雯",
              stars: [
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_gray@2x.png")
                }
              ],
              txt: "内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。",
              otherName: "纵我七情六欲半晌愁",
              num: "233",
              zanNum: "3157"
            },
            {
              src: require("../assets/images/headportrait452.png"),
              name: "WALL",
              stars: [
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                }
              ],
              txt: "脉络分明，层次感强，续期说尽然有序。",
              otherName: "不可爱但是皮",
              num: "185",
              zanNum: "2145"
            },
            {
              src: require("../assets/images/head123.png"),
              name: "冰淇淋",
              stars: [
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_yellow@2x.png")
                },
                {
                  src: require("../assets/images/Star_gray@2x.png")
                }
              ],
              txt: "内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。",
              otherName: "小叮当",
              num: "355",
              zanNum: "1425"
            }
          ]
        }
      ]
    };
  },
  methods: {
    getPageHeight() {
      let topHeight = document.getElementsByClassName("vux-slider")[0]
          .offsetTop,
        diffHeight = window.screen.height - 40;
      this.$nextTick(() => {
        this.$refs.cateSwiper.xheight = diffHeight + "px";
      });
      // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
    },
    // 二级tab
    onDataTab(num) {
      this.tabIndex2 = num;
      // console.log(this.tabIndex2);
    },
    onCollect(index1, index2) {
      let newCollect = this.listContent[3].dataContent[index1].dataList[index2]
        .collect;
      this.listContent[3].dataContent[index1].dataList[
        index2
      ].collect = !newCollect;
    },
    clickDownload(item) {
      this.showDownload = !this.showDownload;
      this.downloadImg = item.listSrc;
      this.downloadTitle = item.listTitle;
    },
    downloadConfirm() {
      this.$vux.alert.show({
        title: "开始下载"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.livePlaybackBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
 // 直播
  .navLive {
    width: 100%;
    height: 400px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .navLive_stop {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 32px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      div:nth-child(1) {
        margin-top: 100px;
      }
      .navLive_stop_btn {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 20px;
        border-radius: 40px;
        border: 2px solid #fff;
        background: -webkit-linear-gradient(
          left,
          #e63a83,
          #fc3958
        ); /* Safari 5.1 - 6.0 */
        background: transparent;
        img {
          width: 30px;
          height: 30px;
          margin: 0 20px;
        }
      }
      .liveTime {
        margin-top: 20px;
      }
    }
  }

  // tab导航
  .navTabList {
    /deep/.vux-tab-selected {
      font-size: 32px;
      font-weight: 600;
    }
  }
  .vux-slider {
    // tab内容板块
    /deep/.vux-swiper {
      overflow-y: auto;
      // 目录样式
      .catalogBox {
        margin-bottom: 120px;
        /deep/.weui-cells {
          margin-top: 0;
          /deep/.weui-cell {
            font-size: 32px;
          }
          .slide {
            padding: 0 40px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
            background-color: #f8f9fa;
            .jie {
              color: currentColor;
              color: #616161;
              font-size: 30px;
              padding: 20px 0;
              display: flex;
              border-top: 1px solid #f0efee;
              .jieIcon {
                width: 42px;
                height: 42px;
                margin-right: 20px;
                vertical-align: middle;
              }
              .jieInfo {
                flex: 1 1 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .jyDate {
                  color: #a1a1a1;
                  margin-top: 10px;
                  font-size: 24px;
                }
                .jieState {
                  width: 42px;
                  height: 42px;
                }
                .zyTitle {
                  font-weight: 600;
                  color: #000;
                }
                .zyNum {
                  font-size: 24px;
                  span {
                    color: #fff;
                    background-color: #4bc863;
                    border-radius: 50%;
                    text-align: center;
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    margin: 0 10px;
                  }
                }
              }
              .zyIcon {
                width: 64px;
                height: 78px;
                margin: 0 20px;
              }
            }
          }
          .animate {
            max-height: 9999px;
            transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
            transition-delay: 0s;
          }
        }
        /deep/.weui-cells:before {
          border-top: 0;
        }
      }
      // 资料样式
      .dataBox {
        .vux-tab-item {
          .active {
            background-color: #3499ff;
            border-radius: 25px;
            color: #fff;
            padding: 6px 20px;
          }
        }
        // 筛选
        .resTitleBox {
          background-color: #f8f9fa;
          width: 100%;
          height: 100px;
          padding: 0 26px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          position: relative;
          .resTitle_left {
            font-size: 30px;
          }
          .resTitle_right {
            margin-left: auto;
            img {
              width: 32px;
              height: 32px;
              margin: 0 20px;
            }
          }

          .sorts {
            position: absolute;
            top: 80px;
            right: 110px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px 5px #ddd;
            z-index: 99;
            &::before {
              content: "";
              width: 0px;
              height: 0px;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-bottom: 10px solid #fff;
              position: absolute;
              top: -10px;
              right: 20px;
            }
            .sortList {
              padding: 15px 30px;
              border-bottom: 1px solid #eee;
              img {
                width: 42px;
                height: 40px;
                vertical-align: middle;
                margin-right: 20px;
              }
            }
          }
        }
        // 资料列表
        .delBtn {
          background-color: #ff9300;
          color: #fff;
          font-size: 30px;
        }
        .demo-content {
          .resList {
            display: flex;
            padding: 30px 26px;
            border-bottom: 2px solid #f0efee;
            box-sizing: border-box;
            .resList_left {
              width: 85px;
              height: 100px;
              margin-right: 20px;
            }
            .resList_middle {
              & > div:nth-child(1) {
                font-size: 30px;
                margin-bottom: 10px;
              }
              & > div:nth-child(2) {
                font-size: 26px;
                color: #a1a1a1;
                span {
                  margin: 0 10px;
                }
              }
            }
            .resList_right {
              margin-left: auto;
              display: flex;
              align-items: center;
              img {
                width: 38px;
                height: 32px;
                margin: 0 15px;
              }
            }
          }
        }
      }
      // 评价样式
      .commentBox {
        .evaBox {
          padding: 20px 26px;
          .evaList {
            display: flex;
            .evaList_left {
              margin-right: 20px;
              img {
                width: 80px;
                height: 80px;
                margin-top: 20px;
              }
            }
            .evaList_right {
              width: 100%;
              font-size: 35px;
              border-bottom: 1px solid #eeeeee;
              .evaList_right_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                div {
                  color: #575757;
                }
                .stars {
                  img {
                    width: 28px;
                    height: 28px;
                    margin-right: 10px;
                  }
                }
              }
              .evaList_right_middle {
                margin: 10px 0;
              }
              .evaList_right_link {
                margin: 10px 0;
                background-color: #f7f7f7;
                display: flex;
                align-items: center;
                padding: 10px 20px;
                font-size: 30px;
                .evaList_right_link_name {
                  max-width: 260px;
                  color: #5f7293;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .evaList_right_link_num {
                  color: #5f7293;
                  margin-left: 20px;
                }
              }
              .evaList_right_bottom {
                margin: 20px 0;
                color: #a7a7a7;
                font-size: 24px;
                display: flex;
                justify-content: center;
                /* align-items: center; */
                .evaList_right_bottom_right {
                  margin-left: auto;
                  display: flex;
                  align-items: center;
                  img {
                    width: 30px;
                    height: 28px;
                    margin: 0px 20px;
                  }
                  div {
                    display: inline-block;
                    font-size: 32px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .emptyBox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
    }
  }

  // 下载弹框
  .downLoadIcon {
    width: 84px;
    height: 98px;
    margin: 20px 0;
  }
  // 目录底部菜单
  .continues {
    position: fixed;
    bottom: 15px;
    left: 10px;
    right: 10px;
    background-color: #5abb52;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      margin: 20px 30px;
    }
    div {
      color: #fff;
      font-size: 30px;
    }
    .continue_btn {
      background-color: #fff;
      color: #44a73c;
      text-align: center;
      padding: 10px 30px;
      border-radius: 20px;
      margin-right: 30px;
    }
  }

  // .mask{
  //   position: fixed;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   background: rgba(0, 0, 0 , .6);
  //   z-index: 88;
  // }
}
</style>